import "./MeterRead.css"
import { Button, Space, Table } from "antd";
import type { TableProps } from 'antd';
import { useEffect, useState } from "react";
import MeterReadMock from "@/mock/MeterReadMock";
import { Link } from "umi";

interface DataType {
  _id: string;
  meterName: string;  //  仪表名称
  payItems: string;  //  收费项目
  meterCycle: string; // 抄表周期
  StartEndDate: string; // 起止日期
  creator: string; // 创建人
  dateCreated: string; // 创建时间
}





export default function MeterRead() {
  const [data, setData] = useState<DataType[]>([])
  const [pagesize, setPagesize] = useState(5)

  useEffect(() => {
    setData(MeterReadMock)
    console.log(MeterReadMock[0])
  })

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '仪表名称',
      dataIndex: 'meterName',
      key: 'meterName',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '收费项目',
      dataIndex: 'payItems',
      key: 'payItems',
      render: (text) => <span>{text}</span>
    },
    {
      title: '抄表周期',
      dataIndex: 'meterCycle',
      key: 'meterCycle',
      render: (text) => <span>{text}</span>
    },
    {
      title: '起止日期',
      dataIndex: 'StartEndDate',
      key: 'StartEndDate',
      render: (text) => <span>{text}</span>
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
      render: (text) => <span>{text}</span>
    },
    {
      title: '创建时间',
      dataIndex: 'dateCreated',
      key: 'dateCreated',
      render: (text) => <span>{text}</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Link to="/MeterReadDetail">明细</Link>
          <a onClick={() => { console.log(record) }}>删除</a>
        </Space>
      ),
    },
  ];

  // 选中数据的回调函数
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  };

  return (
    <div className="Bill">
      <div className="Bill-header">
        <span>周期列表</span>
        <div>
          <Button className="Bill-header-btn" type="primary">+ 账单</Button>
          <Button className="Bill-header-btn">批量操作</Button>
        </div>
      </div>
      <div className="Bill-content">
        <Table<DataType>
          rowSelection={{ type: 'checkbox', onChange: onSelectChange }}
          columns={columns}
          dataSource={data}
          rowKey="_id"
          pagination={{
            position: ["bottomCenter"], // 分页器显示在底部
            pageSize: pagesize,        // 每页显示 5 条数据
            total: data.length, // 总数据条数
            showSizeChanger: true, // 允许用户改变每页显示的条数
            pageSizeOptions: [3, 5, 7, 9], // 每页显示条数的选项
            onShowSizeChange: (current, pageSize) => {  //  页码回调函数
              setPagesize(pageSize)
            }
          }} />
      </div>
    </div>
  )
}
